<template>
    {{ state.msg }}
    <button @click="setState">change msg</button>
    <button @click="increment">Count is: {{ count }}</button>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
  <div>hello world</div>
  <ComponentA :count="count" :msg="state.msg" />
</template>
<script setup lang="ts">
import { computed, ref, Ref, withDefaults, onMounted,onActivated, watch,reactive ,provide } from 'vue';
import ComponentA from "./ComponentA.vue";

interface User{
    date: string
    name: string
    address: string 
}
const tableData:User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

// 顶层组件通过 provide 函数提供数据
provide('tableData',tableData)

const state = reactive({
    msg: 'this is msg'
})

const setState = ()=>{
    state.msg = 'this.is new msg'

}

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment(){
    count.value++
}

// 生命周期钩子
onActivated(()=>{
  console.log(`onActivated ${count.value}`);
  
})
onMounted(()=>{
    console.log('the initial count is '+count.value)
})
</script>